<!DOCTYPE html>
<html>
<head>
    {include file="common/meta" /}

    <style type="text/css">
        body {
            color: #999;
            background-color: #f1f4fd;
            background-size: cover;
        }

        a {
            color: #444;
        }


        .login-screen {
            max-width: 430px;
            padding: 0;
            margin: 100px auto 0 auto;

        }

        .login-screen .well {
            border-radius: 3px;
            -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 1);
            border: none;
            /*overflow: hidden;*/
            padding: 0;
        }

        @media (max-width: 767px) {
            .login-screen {
                padding: 0 20px;
            }
        }

        .profile-img-card {
            width: 100px;
            height: 100px;
            display: block;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            margin: -93px auto 30px;
            border: 5px solid #fff;
        }

        .profile-name-card {
            text-align: center;
        }

        .login-head {
            background: #899fe1;
            border-radius: 3px 3px 0 0;
        }

        .login-form {
            padding: 40px 30px;
            position: relative;
            z-index: 99;
        }

        #login-form {
            margin-top: 20px;
        }

        #login-form .input-group {
            margin-bottom: 15px;
        }

        #login-form .form-control {
            font-size: 13px;
        }

    </style>
    <!--@formatter:off-->
    {if $background}
        <style type="text/css">
            body{
                background-image: url('{$background}');
            }
        </style>
    {/if}
    <!--@formatter:on-->
</head>
<body>
<div class="container">
    <div class="login-wrapper">
        <div class="login-screen">
            <div class="well">
                <div class="login-head">
                    <img src="__CDN__/assets/img/login-head.png" style="width:100%;"/>
                </div>
                <div class="login-form">
                    <img id="profile-img" class="profile-img-card" src="__CDN__/assets/img/avatar.png"/>
                    <p id="profile-name" class="profile-name-card"></p>

                    <form action="index/phonelogin" method="post" id="login-form">
                        <div id="errtips" class="hide"></div>
                        {:token()}
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                            <input type="text" class="form-control" id="pd-form-mobile" placeholder="{:__('手机号')}" name="mobile" autocomplete="off" value="" data-rule="{:__('Username')}:required;"/>
                        </div>

<!--                        <div class="input-group">-->
<!--                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>-->
<!--                            <input type="text" class="form-control" id="pd-form-captcha" placeholder="验证码" name="captcha" autocomplete="off" value=""  style="width: 60%;"/>-->
<!--                            <div  id="btn" onclick="startCountdown()" class="form-control" style="width: 40%;cursor: pointer;text-align: center">发送验证码</div>-->
<!--                        </div>-->
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
                            <input type="password" class="form-control" id="pd-form-password" placeholder="{:__('Password')}" name="password" autocomplete="off" value="" data-rule="{:__('Password')}:required;password"/>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success btn-lg btn-block" style="background:#708eea;">{:__('Sign in')}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common/script" /}
</body>
<script>
    var kk=true
    function startCountdown() {

        if(kk){

            var btn = document.getElementById("btn");
            var count = 60;
            // 设置按钮不可点击
            // btn.disabled = true;
            kk=false
            send()
            // 显示倒计时初始值
            btn.innerHTML = count + "秒后重新获取";

            // 每秒减少倒计时
            var timer = setInterval(function() {
                count--;
                btn.innerHTML = count + "秒后重新获取";

                if (count === 0) {
                    // 倒计时结束，恢复按钮状态
                    clearInterval(timer);
                    btn.disabled = false;
                    kk=true;
                    btn.innerHTML = "获取验证码";
                }
            }, 1000);
        }


    }
    // 发送验证码方法
    function send(){
        var event = 'login';
        var mobile = $('#pd-form-mobile').val();
        $.ajax({
            url:'index/send',
            type:'POST',
            dataType: 'JSON',
            data:{
                mobile:mobile,
                event:event
            },
            success: function(result){
                if(result.code == 1){
                    layer.alert(result.msg, {icon:1}); // 显示2秒后自动关闭
                }else{
                    layer.alert(result.msg, {icon:2}); // 显示2秒后自动关闭
                }
            }
        })
    }
</script>
</html>
